<template>
<b-container fluid class="login" v-clientHeight="clint">
    <b-form>
        <div class="bg">
            <b-row class="my-1 mt-4">
                <b-col md="12">
                    <h1>未来社区用户登陆</h1>
                </b-col>
                <b-col md="12">
                    <b-form-group id="input-group-phone" label="请输入手机号码:" label-for="input-phone">
                        <b-form-input id="input-phone" v-model="user.phone" type="text" placeholder="您必须输入正确的手机号码" required></b-form-input>
                    </b-form-group>
                </b-col>
            </b-row>
            <b-row class="mt-4">
                <b-col md="12">
                    <b-form-group id="input-group-password" label="请输入密码" label-for="input-password">
                        <b-form-input id="input-password" v-model="user.password" type="password" placeholder="您必须输入正确的密码" required></b-form-input>
                    </b-form-group>

                </b-col>
            </b-row>

            <b-row class="mt-4">
                <b-col md="12">
                    <b-button type="submit" style="width:100%;display:block" variant="primary" @click="loginSave">确认登陆</b-button>
                </b-col>
            </b-row>
                <b-row class="mt-4">
                <b-col md="12" class="d-flex justify-content-between">
                    <router-link  to="#">忘记密码</router-link>
                    <router-link  to="/register">还没有帐号？去注册</router-link>
                </b-col>
            </b-row>
             
        </div>
    </b-form>
</b-container>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            clint: {
                width: 100,
                height: 0,
                imgUrl: require("../assets/login-background.jpg")
            },
            user: {
                phone: "",
                password: "",
            },
        };
    },
    methods:{
        loginSave(){
             this.$userApi.login(this.user).then((res)=>{
               if(res.token){
                  this.$router.push({
                    name:"Home"
                  })
               }
             })
        }
    }
    // directives: {
    //     clientHeight: {
    //         bind(el) {
    //             let h = function () {
    //                 let height = document.documentElement.clientHeight
    //                 el.style.height = height + 'px'
    //                 el.style.background = "red"
    //             }
    //             h()
    //             window.onresize = h
    //         }
    //     }
    // }
};
</script>

<style lang="scss">
.login {
    display: flex;
    justify-content: center;
    flex-direction: column;

    a{
        text-decoration: none;
        font-size: 14px;
        display: block;

    }

    .bg {
        width: 450px;
        padding: 25px;
        margin: 0 auto;
        border-radius: 5px;
        background: rgba($color: #fff, $alpha: 0.4);
    }
}
</style>
